<template>
	<view>
		<view class="query-flex">
			<u-cell-group>
				<u-cell-item title="计划名称:" :arrow="false" class="list-title">
					<input class="list-text" type="text" :value="value" />
				</u-cell-item>
				<u-cell-item title="条形码:" :arrow="false" class="list-title">
					<view class="inv-color">
						<image class="img" src="../../../../static/barcode.png" mode=""></image>
					</view>
				</u-cell-item>

				<u-cell-item title="" :arrow="false" class="list-title">
					<view class="list-text list-text-color">
						<text>已检项目</text>
						<text style="padding: 0 10px;">未检项目</text>
						<u-checkbox-group>
							<u-checkbox active-color="#999" v-model="checked" :disabled="false" @change="checkboxChange">是否已检</u-checkbox>
						</u-checkbox-group>
					</view>
				</u-cell-item>

				<u-cell-item title="点检部位:" :arrow="false" class="list-title">
					<input class="list-text" type="text" :value="value" />
				</u-cell-item>

				<u-cell-item title="点检内容:" :arrow="false" class="list-title">
					<input class="list-text" type="text" :value="value" />
				</u-cell-item>

				<u-cell-item title="测量项目:" :arrow="false" class="list-title">
					<input class="list-text" type="text" :value="value" />
				</u-cell-item>

				<u-cell-item title="测量结果:" :arrow="false" class="list-title">
					<input class="list-text" type="text" :value="value" />
				</u-cell-item>

				<u-cell-item title="点检结果:" :arrow="false" class="list-title">
					<input class="list-text" type="text" :value="value" />
				</u-cell-item>
			</u-cell-group>

			<!-- 首页\上一页\下一页\最后一页 -->
			<view class="padd">
				<u-row gutter="16">
					<u-col span="3">
						<u-button>
							<u-icon size="40" name="skip-back-left"></u-icon>
						</u-button>
					</u-col>
					<u-col span="3">
						<u-button>
							<u-icon size="40" name="play-left"></u-icon>
						</u-button>
					</u-col>
					<u-col span="3">
						<u-button>
							<u-icon size="40" name="play-right"></u-icon>
						</u-button>
					</u-col>
					<u-col span="3">
						<u-button>
							<u-icon size="40" name="skip-forward-right"></u-icon>
						</u-button>
					</u-col>
				</u-row>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="flexinven-button">
			<u-row gutter="16" class="flexinven-con">
				<u-col span="4">
					<view class="flexinven-flexbgcolor">保存</view>
				</u-col>
				<u-col span="4">
					<view class="flexinven-flexbgcolor">取消</view>
				</u-col>
				<u-col span="4">
					<view class="flexinven-flex">返回</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				checked: false,
			}
		},
		methods: {
			checkboxChange(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-text-color {
		color: #799cb3;
	}

	.list-title {
		color: #799cb3;
	}

	.padd {
		padding: 30px;
	}
</style>
